<template>
  <div>
    <el-card>
      <el-form :model="form" size="mini" label-position="top" ref="form">
        <el-row :gutter="10">
          <el-col :lg="4" :md="6" v-if="isShow==true">
            <el-form-item label="机构" prop="BRANCHNO">
              <select-tree :branch="form.branch.BRANCHNAME" @getBranchName="getBranch">
              </select-tree>
            </el-form-item>
          </el-col>
          <el-col :lg="4" :md="6">
            <el-form-item label="坐席编号" prop="AGENTID" v-if="isShow==true">
              <el-input v-model="form.AGENTID" placeholder="请输入坐席编号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :lg="4" :md="6">
            <el-form-item label="申请类型" prop="STATUS">
              <el-select size="mini"  v-model="form.STATUS" @change="getScheduleApplication"
                placeholder="请选择申请状态" style="width:100%;">
                <el-option v-for="item in statusOption" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
              <!-- <el-input v-model="form.STATUS" placeholder="请选择申请状态"></el-input> -->
            </el-form-item>
          </el-col>
          <el-col :lg="4" :md="6">
            <el-form-item label="查询类型" prop="QUERYTYPE">
              <el-select size="mini" v-model="form.QUERYTYPE" @change="getScheduleApplication" placeholder="请选择查询类型"
                style="width:100%;">
                <el-option v-for="item in queryTypeList" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
              <!-- <el-input v-model="form.QUERYTYPE" placeholder="请选择查询类型"></el-input> -->
            </el-form-item>
          </el-col>
          <el-col :lg="4" :md="6">
            <el-form-item label="开始日期" prop="startDate">
              <el-date-picker size="mini" style="width:100%;" v-model="form.startDate" type="date"
                value-format="yyyyMMdd" placeholder="开始日期" :picker-options="pickerOptionsStart" @change="changeStart">
              </el-date-picker>
              <!-- <el-input v-model="form.startDate" placeholder="请输入开始日期"></el-input> -->
            </el-form-item>
          </el-col>
          <el-col :lg="4" :md="6">
            <el-form-item label="结束日期" prop="endDate">
              <el-date-picker style="width:100%;" size="mini" v-model="form.endDate" type="date" value-format="yyyyMMdd"
                placeholder="结束日期" :picker-options="pickerOptionsEnd" @change="changeEnd">
              </el-date-picker>
              <!-- <el-input v-model="form.endDate" placeholder="请输入结束日期"></el-input> -->
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :lg='6' :md='6'>
            <el-button type="primary" icon="el-icon-search" size='mini' @click="getScheduleApplication">查询
            </el-button>
          <!-- </el-col>
          <el-col :lg="2" :md="3"> -->
            <el-button type="warning" size="mini" icon="el-icon-refresh" @click="resetForm('form')">重置</el-button>
          </el-col>
          <!-- <el-col :lg="2" :md="3">
            <el-button type="primary" size="mini" icon="el-icon-plus" @click="applicate">新增换班申请</el-button>
          </el-col> -->
        </el-row>
      </el-form>
      <!-- <el-row>
        <el-col :span="2">
          <el-button type="primary" size="small" @click="applicate">换班申请</el-button>
        </el-col>
        <el-col :span="2" :offset="19">
          <el-select size="small" v-model="queryType" @change="getScheduleApplication" style="width:130px">
            <el-option v-for="item in queryTypeList" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-col>
      </el-row> -->
      <br />
      <el-row>
        <el-table :data="tableData">
          <el-table-column prop="STATUS" label="状态" width="120"></el-table-column>
          <el-table-column prop="TYPE" label="类型" align="center"></el-table-column>
          <el-table-column prop="AGENTNAME" label="申请人" align="center" width="120"></el-table-column>
          <el-table-column prop="CLASSESDATE" label="申请班次日期" align="center" width="120">
            <template slot-scope="scope">
              <div>
                {{scope.row.CLASSESDATE | timeFormat}}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="CLASSESID" label="班次编号" width="120" align="center"></el-table-column>
          <el-table-column prop="CLASSESNAME" label="班次名称" align="center" width="120"></el-table-column>
          <el-table-column prop="EXCHAGENTID" label="对换人坐席号" align="center" width="120"></el-table-column>
          <el-table-column prop="EXCHAGENTNAME" label="对换人坐席名称" align="center" width="120"></el-table-column>
          <el-table-column prop="EXCHCLASSESDATE" label="对换人班次日期" align="center" width="120">
            <template slot-scope="scope">
              <div>
                {{scope.row.EXCHCLASSESDATE | timeFormat}}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="EXCHCLASSESID" label="对换班次编号" align="center" width="120"></el-table-column>
          <el-table-column prop="EXCHCLASSESNAME" label="对换班次名称" align="center" width="120"></el-table-column>
          <el-table-column prop="SRTDATETIME" label="申请开始日期" align="center" width="160">
            <template slot-scope="scope">
              <div>
                {{scope.row.SRTDATETIME | timeFormat}}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="ENDDATETIME" label="申请结束日期" align="center" width="160">
            <template slot-scope="scope">
              <div>
                {{scope.row.ENDDATETIME | timeFormat}}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="CHKUSER" label="审批人工号" align="center" width="120">
          </el-table-column>
          <el-table-column prop="NOTE" label="备注" width="300"></el-table-column>
          <el-table-column label="操作" fixed="right" align="center">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="verifyDialog(scope.row)"
                v-if="form.QUERYTYPE == '3' && (scope.row.STATUS=='应答人同意' || scope.row.STATUS=='已申请')">审批</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
      <!-- 审批的Dialog -->
      <el-dialog :title="dialogTitle" :visible.sync="dialogFlag" :lock-scroll=false>
        <el-form ref="form" :model="info">
          <el-form-item>
            <!-- 换班 -->
            <div v-if="form.STATUS == 'S'">
            <p style="font-size:0.9rem;">
              &nbsp;&nbsp;&nbsp;&nbsp;坐席编号{{dialogInfo.AGENTID+'，姓名'+dialogInfo.AGENTNAME}}申请将{{dialogInfo.CLASSESDATE | timeFormat}}我的{{dialogInfo.CLASSESNAME}}与{{dialogInfo.EXCHAGENTID+'  '+dialogInfo.EXCHAGENTNAME}}于{{dialogInfo.EXCHCLASSESDATE | timeFormat}}的{{dialogInfo.EXCHCLASSESNAME}}进行双向调换，我需要在{{dialogInfo.LATESTTIME}}之前得到答复，望批准，谢谢！
            </p>
            </div>
            <!-- 休假 -->
            <div v-else>
              <p style="font-size:0.9rem;">
              &nbsp;&nbsp;&nbsp;&nbsp;坐席编号{{dialogInfo.AGENTID+'，姓名'+dialogInfo.AGENTNAME}}申请在{{dialogInfo.SRTDATETIME | timeFormat}} 至 {{dialogInfo.ENDDATETIME | timeFormat}} 休{{dialogInfo.ACTIVITYTYPE | actFormat}}，望批准，谢谢！
            </p>
            </div>
          </el-form-item>
          <el-form-item label="审批注释">
            <el-input size="small" type="textarea" v-model="NOTE3"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" size="small" @click="verify('agree', dialogData)">同意</el-button>
          <el-button type="default" size="small" @click="verify('refuse', dialogData)">拒绝</el-button>
        </span>
      </el-dialog>
    </el-card>
    <!-- <component :is="dialogList.changeDialog" :option="changeOption" @ListenChange="getScheduleApplication"></component> -->

  </div>
</template>

<script>
  import scheduleApplicationList from '@/message/wfm/userScheduleManage/scheduleApplication/scheduleApplicationList';
  //   import scheduleApplication from '@/message/wfm/scheduleDataManage/scheduleApplication/scheduleApplication';
  import scheduleList from '@/message/wfm/userScheduleManage/scheduleApplication/scheduleList';
  import cancelApplication from '@/message/wfm/userScheduleManage/scheduleApplication/cancelApplication';
  import answerApplication from '@/message/wfm/userScheduleManage/scheduleApplication/answerApplication';
  import verifyApplication from '@/message/wfm/userScheduleManage/scheduleApplication/verifyApplication';
  import request from "@/common/utils/requestWFM";
  import ActivityQuery from '@/message/wfm/scheduleDataManage/activityManage/actQuery'

  import moment from 'moment';
  import selectTree from "@/components/selectTree5/"
  // import changeDialog from './dialog/changeSchedule'
  import toolBox from '@/common/utils/toolBox'
  let that
  export default {
    props: {
      isShow: {
        type: Boolean,
        default: true
      },
    },
    components: {
      selectTree
    },
    beforeCreate: function () {
     that = this;
    },
    filters: {
      timeFormat(val) {
        if (val == '') {
          return ''
        }
        return toolBox.timeFormat(val)
      },
      actFormat(val) {
        let str = ''
        that.actOptions.map(item => {
          if(item.ACTIVITYTYPE == val)
          str = item.ACTIVITYTYPENAME
        })
        return str
      }
    },
    data() {
      return {
        pickerOptionsStart: {
          disabledDate: (time) => {
            // return time.getTime() < Date.now()
          }
        },
        pickerOptionsEnd: {
          disabledDate: (time) => {
            // return time.getTime() < Date.now()
          }
        },
        form: { //表单数据
          startDate: '',
          endDate: '',
          branch: {
            BRANCHNO: this.$store.getters.BranchNum,
            BRANCHNAME: this.$store.getters.BranchName
          },
          AGENTID: '',
          QUERYTYPE: '3',
          STATUS: 'S'
        },
        // mock数据，调试完成删除
        mockData: {
          AGENTID: this.$store.getters.UserNum,
          BRANCHNO: this.$store.getters.BranchNum,
        },
        dialogTitle: '',
        dialogFlag: false,
        tableData: [],
        changeOption: {
          isShow: false,
          AGENTID: '',
        },
        dialogInfo: {},
        dialogData: {},
        queryType: '1',
        NOTE2: '',
        NOTE3: '',
        info: {
          otherDate: '',
          otherSchedule: '',
          myDate: '',
          mySchedule: '',
          remark: '',
          lastTime: ''
        },
        actOptions: [],
        // others: [],
        // mySchedules: [],
        queryTypeList: [{
            label: '我的待审批',
            value: '3',
          },
        ],
        statusOption: [
          {
            label: '换班申请',
            value: 'S'
          },
          {
            label: '休假申请',
            value: 'H'
          },
          
        ]
      }
    },
    created() {
      this.form.startDate = toolBox.getCurrentMonthFirstDay();
      this.changeStart();
      this.form.endDate = toolBox.getCurrentMonthLastDay();
      this.changeEnd();
      // 获取休假类型
      this.actQuery()
    },
    mounted() {
      // 获取换班数据
      this.getScheduleApplication();
      
    },
    methods: {
       // 活动查询
      async actQuery() {
        let resBody = new ActivityQuery()
        resBody.data.CurrPage = 1;
        resBody.data.PageRowNum = 20;
        resBody.data.ACTIVITYCATEG = '04';
        let response = await request(resBody);
        if (response.SYS_HEAD.ReturnCode == "000000") {
          this.actOptions = response.BODY.RSPSTRUCT
        } else {
          this.$message({
            type: "error",
            message: "请求失败，错误码:" + response.SYS_HEAD.ReturnCode + "，错误信息：" + response.SYS_HEAD.ReturnMessage
          })
        }
      },
      getBranch(data) {
        this.form.branch.BRANCHNO = data.BRANCHNO
        this.form.branch.BRANCHNAME = data.BRANCHNAME
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      changeStart() {
        this.pickerOptionsEnd = Object.assign({}, this.pickerOptionsEnd, {
          disabledDate: (time) => {
            if (this.form.startDate) {
              return time.getTime() < Date.parse(this.form.startDate.slice(0, 4) + '-' + this.form
                .startDate.slice(4, 6) +
                '-' + this.form.startDate.slice(6, 8)) - 8.64e7
            } else {
              return time.getTime() < Date.now();
            }
          }
        })
      },
      changeEnd() {
        this.pickerOptionsStart = Object.assign({}, this.pickerOptionsStart, {
          disabledDate: (time) => {
            if (this.form.endDate) {
              return time.getTime() > Date.parse(this.form.endDate.slice(0, 4) + '-' + this.form.endDate
                .slice(4, 6) + '-' +
                this.form.endDate.slice(6, 8))
            } else {
              // return time.getTime() < Date.now();
            }
          }
        })
      },
      // 查询换班申请
      async getScheduleApplication() {
        let that = this;
        let resBody = new scheduleApplicationList();
        resBody.data.SERVICETYPE = this.form.STATUS
        resBody.data.BRANCHNO = this.form.branch.BRANCHNO;
        resBody.data.AGENTID = this.form.AGENTID;
        resBody.data.QUERYTYPE = this.form.QUERYTYPE;
        resBody.data.STATUS = '';
        resBody.data.BEGINDATE = this.form.startDate;
        resBody.data.ENDDATE = this.form.endDate;
        let response = await request(resBody);
        this.tableData = response.BODY.SERVICEINFO;
        if (response.SYS_HEAD.ReturnCode == '000000') {
          if (this.form.STATUS == 'S') {

            this.tableData.map(function (value) {
              value.TYPE = '班次调换';
              switch (value.STATUS) {
                case '0':
                  value.STATUS = '已申请';
                  break;
                case '1':
                  value.STATUS = '已撤销';
                  break;
                case '2':
                  value.STATUS = '应答人同意';
                  break;
                case '3':
                  value.STATUS = '应答人拒绝';
                  break;
                case '4':
                  value.STATUS = '审批人同意';
                  break;
                case '5':
                  value.STATUS = '审批人拒绝';
                  break;
                case '6':
                  value.STATUS = '已过期';
                  break;
              };
              // // 对换人坐席与当前坐席一致
              // if(value.EXCHAGENTID == that.mockData.agentID) {
              //     // 已申请状态则需要审批
              //     if(value.STATUS == '已申请') {
              //         // 判定是否审核人
              //         value.verifyFlag = true;
              //     }else{
              //         value.verifyFlag = false;
              //     }
              // // 申请坐席与当前坐席一致时不需要审批
              // }else if(value.AGENTID == that.mockData.agentID){
              //     value.verifyFlag = false;
              // }else{
              //     if(value.STATUS == '应答人同意') {
              //         value.verifyFlag = true;
              //     }else{
              //         value.verifyFlag = false;
              //     }
              // }                     
            });
            // console.log('list', response, that.tableData, 'kkkkk')
          } else {
            this.tableData.map(function (value) {
              value.TYPE = '休假申请';
              switch (value.STATUS) {
                case '0':
                  value.STATUS = '已申请';
                  break;
                case '1':
                  value.STATUS = '已撤销';
                  break;
                  // case '2':
                  //   value.STATUS = '应答人同意';
                  //   break;
                  // case '3':
                  //   value.STATUS = '应答人拒绝';
                  //   break;
                case '4':
                  value.STATUS = '审批人同意';
                  break;
                case '5':
                  value.STATUS = '审批人拒绝';
                  break;
                case '6':
                  value.STATUS = '已过期';
                  break;
              }
            })
          }
        } else {
          this.$message({
            type: "error",
            message: "请求失败，错误码:" + response.SYS_HEAD.ReturnCode + "，错误信息：" + response.SYS_HEAD.ReturnMessage
          })
        }
      },
      //   closeDialog() {
      //     this.showDialog = false;
      //   },
      // 审批dialog
      verifyDialog(data) {
        // console.log('verifyDialogData', data)
        if (this.form.STATUS == 'S') {
          this.dialogInfo = {};
          this.dialogData = {};
          this.dialogTitle = '换班申请审批';
          this.dialogInfo.AGENTID = data.AGENTID;
          this.dialogInfo.EXCHCLASSESDATE = data.EXCHCLASSESDATE;
          this.dialogInfo.AGENTNAME = data.AGENTNAME;
          this.dialogInfo.CLASSESNAME = data.CLASSESNAME;
          this.dialogInfo.EXCHCLASSESNAME = data.EXCHCLASSESNAME;
          this.dialogInfo.EXCHAGENTNAME = data.EXCHAGENTNAME;
          this.dialogInfo.EXCHCLASSESID = data.EXCHCLASSESID;
          this.dialogInfo.EXCHAGENTID = data.EXCHAGENTID;
          this.dialogInfo.CLASSESDATE = data.CLASSESDATE;
          this.dialogInfo.CLASSESID = data.CLASSESID;
          this.dialogInfo.LATESTTIME = data.LATESTTIME;
          this.dialogData.APPLYDATE = data.APPLYDATE;
          this.dialogData.APPLYSERNO = data.APPLYSERNO;
          this.dialogData.CHKUSER = this.$store.getters.UserNum
          this.dialogFlag = true;
        }else{
          this.dialogInfo = {};
          this.dialogData = {};
          this.dialogTitle = '休假申请审批';
          this.dialogInfo.AGENTID = data.AGENTID;
          this.dialogInfo.AGENTNAME = data.AGENTNAME;
          this.dialogInfo.APPLYSERNO = data.APPLYSERNO; //申请流水
          this.dialogInfo.SRTDATETIME = data.SRTDATETIME; //申请开始日期时间
          this.dialogInfo.ENDDATETIME = data.ENDDATETIME; //申请结束日期时间
          this.dialogInfo.ACTIVITYTYPE = data.ACTIVITYTYPE; //休假类型
          this.actOptions.map(item => {
            if(item.ACTIVITYTYPE == this.dialogData.ACTIVITYTYPE)
            this.dialogData.ACTIVITYTYPENAME = item.ACTIVITYTYPENAME
          })
          this.dialogData.APPLYDATE = data.APPLYDATE;
          this.dialogData.APPLYSERNO = data.APPLYSERNO;
          this.dialogData.CHKUSER = this.$store.getters.UserNum
          this.dialogFlag = true;
        }
      },
      // 应答换班申请
      async answer(type, data) {
        // console.log('answerData', data);
        let resBody = new answerApplication();
        resBody.data.APPLYDATE = data.APPLYDATE;
        resBody.data.APPLYSERNO = data.APPLYSERNO;
        resBody.data.EXCHAGENTID = data.EXCHAGENTID;
        resBody.data.ANSW = type;
        resBody.data.NOTE2 = this.NOTE2;
        let response = await request(resBody);
        this.dialogFlag = false;
        this.getScheduleApplication();
        // console.log('answer', response);
      },
      // 审批换班申请
      async verify(type, data) {
        // console.log('verifyData', data);
        let resBody = new verifyApplication();
        resBody.data.APPLYDATE = data.APPLYDATE;
        resBody.data.APPLYSERNO = data.APPLYSERNO;
        resBody.data.CHKUSER = data.CHKUSER;
        resBody.data.ANSW = type;
        resBody.data.NOTE3 = this.NOTE3;
        let response = await request(resBody);
        this.dialogFlag = false;
        this.getScheduleApplication();
        // console.log('verify', response);
      }
    }
  }

</script>

<style lang='scss' scoped>

</style>
